<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>徽章</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">徽章</div>
                <div class="layui-card-body">
                    小圆点：
                    <span class="layui-badge-dot"></span>
                    <span class="layui-badge-dot layui-bg-orange"></span>
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <span class="layui-badge-dot layui-bg-cyan"></span>
                    <span class="layui-badge-dot layui-bg-blue"></span>
                    <span class="layui-badge-dot layui-bg-black"></span>
                    <span class="layui-badge-dot layui-bg-gray"></span>

                    <br><br>常规弧形徽章：
                    <span class="layui-badge">6</span>
                    <span class="layui-badge">99</span>
                    <span class="layui-badge">61728</span>
                    <span class="layui-badge">赤</span>
                    <span class="layui-badge layui-bg-orange">橙</span>
                    <span class="layui-badge layui-bg-green">绿</span>
                    <span class="layui-badge layui-bg-cyan">青</span>
                    <span class="layui-badge layui-bg-blue">蓝</span>
                    <span class="layui-badge layui-bg-black">黑</span>
                    <span class="layui-badge layui-bg-gray">灰</span>

                    <br><br>边框徽章：
                    <span class="layui-badge-rim">6</span>
                    <span class="layui-badge-rim">Hot</span>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('layer',function(){

});
</script>
</body>
</html>